<template>
    <div class="content">
        <SearchTitle />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="jsflexBox">
                    <div class="jsflexLabel">供需类型</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.val === item.dictLabel }"
                            v-for="item in sysBusinessSupplyDemandData" :key="item.id"
                            @click="gxTasbsfun(item.dictLabel)">
                            {{ item.dictLabel }}
                        </div>
                    </div>
                </div>
                <div class="jsflexBox">
                    <div class="jsflexLabel">县区区域</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.region_id === item.dictValue }"
                            v-for="item in sysRegionData" :key="item.id" @click="xqTasbsfun(item.dictValue)">
                            {{ item.dictLabel }}
                        </div>
                    </div>
                </div>
                <div class="jsflexBox">
                    <div class="jsflexLabel">发布时间</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.fabu_time === item.date }" v-for="item in dateData"
                            :key="item.date" @click="fbsjTasbsfun(item.date)">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </el-card>
            <div class="jrlistTotalBox">共搜索到 {{ totalData }} 条结果</div>
            <div class="listFlexBox">
                <div class="listCardBox" v-for="item in lcEnterpriseInfosLoadKeHuNoData" :key="item.id">
                    <div class="listTitleBox">{{ item.title }}</div>
                    <div class="listNameBox">{{ item.contact_person }}</div>
                    <div class="tabsFlex">
                        <div class="tabsBox">{{ item.region_name }}</div>
                        <div class="tabsBox">{{ item.timeCountdown }}</div>
                    </div>
                    <div class="tabsFlex">
                        <img class="iconBox" src="/src/assets/icon/信息.png" alt="">
                        <div class="descriptionBox">{{ item.description }}</div>
                    </div>
                    <div class="tabsFlex">
                        <img class="iconBox" src="/src/assets/icon/电话.png" alt="">
                        <div class="descriptionBox">{{ item.telPhone }}</div>
                    </div>
                </div>
            </div>
            <div class="fenyeBox">
                <el-pagination v-model:current-page="parameterData.pageNum" v-model:page-size="parameterData.pageSize"
                    background layout="prev, pager, next, jumper" :total="totalData"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import SearchTitle from '@/components/general/SearchTitle.vue';
import { lcEnterpriseInfosLoadKeHuNo } from '@/api/api.js'
import { sysBusinessSupplyDemand, sysRegion } from '@/api/dictionary.js';
import { getDaysBefore, getMonthsBefore, getYearsBefore } from '@/utils/time';
import { timeCountdown } from '@/utils/time';
import { formatPhoneNumber } from '@/utils/phone';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
import { ref, onMounted } from 'vue';
onMounted(() => {
    sysBusinessSupplyDemandfun()
    sysRegionfun()
    if (route.query.val) {
        parameterData.value.val = route.query.val;
        lcEnterpriseInfosLoadKeHuNofun()
    }
})
const parameterData = ref({
    pageNum: 1,
    pageSize: 12,
    val: '',
    region_id: '',
    fabu_time: ''
})
const totalData = ref(0);
// 供需类型
const sysBusinessSupplyDemandData = ref([]);
const sysBusinessSupplyDemandfun = async () => {
    const res = await sysBusinessSupplyDemand()
    sysBusinessSupplyDemandData.value = res.data
}
// 县区
const sysRegionData = ref([]);
const sysRegionfun = async () => {
    const res = await sysRegion()
    sysRegionData.value = [
        {
            dictLabel: '全部',
            dictValue: ''
        },
        ...res.data.map(item => {
            return { dictLabel: item.dictLabel, dictValue: item.dictLabel }
        })
    ]
}
const dateData = ref([
    {
        date: '',
        name: '全部'
    },
    {
        date: getDaysBefore(1),
        name: '近一天'
    },
    {
        date: getDaysBefore(3),
        name: '近三天'
    },
    {
        date: getDaysBefore(5),
        name: '近五天'
    },
    {
        date: getDaysBefore(7),
        name: '近七天'
    },
    {
        date: getDaysBefore(14),
        name: '近十四天'
    },
    {
        date: getMonthsBefore(1),
        name: '近一月'
    },
    {
        date: getMonthsBefore(3),
        name: '近三月'
    },
    {
        date: getMonthsBefore(6),
        name: '近半年'
    },
    {
        date: getYearsBefore(1),
        name: '近一年'
    }
])
// 列表数据获取
const lcEnterpriseInfosLoadKeHuNoData = ref([]);
const lcEnterpriseInfosLoadKeHuNofun = async () => {
    const res = await lcEnterpriseInfosLoadKeHuNo(parameterData.value)
    totalData.value = res.count
    lcEnterpriseInfosLoadKeHuNoData.value = res.data.map(item => {
        return {
            ...item,
            timeCountdown: timeCountdown(item.create_time),
            telPhone: formatPhoneNumber(item.telPhone)
        }
    })
}
// 分页
const handleCurrentChange = (val) => {
    parameterData.value.pageNum = val;
    lcEnterpriseInfosLoadKeHuNofun()
}
// 供需类型点击
const gxTasbsfun = (val) => {
    parameterData.value.val = val;
    parameterData.value.pageNum = 1;
    lcEnterpriseInfosLoadKeHuNofun()
}
// 县区类型点击
const xqTasbsfun = (regionId) => {
    parameterData.value.region_id = regionId;
    parameterData.value.pageNum = 1;
    lcEnterpriseInfosLoadKeHuNofun()
}
// 发布时间
const fbsjTasbsfun = (createTime) => {
    parameterData.value.fabu_time = createTime;
    parameterData.value.pageNum = 1;
    lcEnterpriseInfosLoadKeHuNofun()
}
// 返回
const fanhuifun = () => {
    router.go(-1);
};
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.jsflexBox {
    display: flex;
    margin-bottom: 20px;

    .jsflexLabel {
        width: 8%;
        font-size: 14px;
        color: #000000;
    }

    .jsRightFlex {
        display: flex;
        gap: 15px;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        cursor: pointer;
    }
}

.active {
    color: #2972FA;
    font-weight: bold;
}

.jrlistTotalBox {
    font-size: 16px;
    color: #1F1F1F;
    margin: 30px 0;
}

.listFlexBox {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    .listCardBox {
        flex: 0 0 calc(25% - 15px);
        background: #FFFFFF;
        padding: 15px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .listTitleBox {
            font-weight: 400;
            font-size: 16px;
            color: #1F1F1F;
        }

        .listNameBox {
            font-weight: 300;
            font-size: 14px;
            color: #1F1F1F;
        }

        .tabsFlex {
            display: flex;
            align-items: center;
            gap: 5px;

            .tabsBox {
                background: #DEF0E7;
                border-radius: 2px;
                font-weight: 300;
                font-size: 12px;
                color: #008743;
                padding: 2px 4px;
            }

            .iconBox {
                width: 15px;
                height: 15px;
            }

            .descriptionBox {
                font-weight: 300;
                font-size: 12px;
                color: #1F1F1F;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 220px;
            }
        }
    }
}

.fenyeBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #F1F1F1;
    padding-top: 20px;
}
</style>